<script setup lang="ts">
import { computed } from 'vue'
import { useUserStore } from '@/stores/user'

const props = defineProps<{
  // 允许访问的用户类型，如：[1, 2] 表示管理员和教师可访问
  allowedTypes?: number[]
  // 所需权限，如：['user:add', 'user:edit']
  permissions?: string[]
}>()

const userStore = useUserStore()

// 检查用户类型权限
const hasTypePermission = computed(() => {
  if (!props.allowedTypes?.length) return true
  return props.allowedTypes.includes(userStore.userInfo?.userType || 0)
})

// 检查功能权限
const hasPermission = computed(() => {
  if (!props.permissions?.length) return true
  return props.permissions.every(permission => 
    userStore.userInfo?.permissions?.includes(permission)
  )
})

// 是否有权限访问
const canAccess = computed(() => hasTypePermission.value && hasPermission.value)
</script>

<template>
  <template v-if="canAccess">
    <slot />
  </template>
  <template v-else>
    <slot name="unauthorized">
      <div class="unauthorized">
        <a-result
          status="403"
          title="403"
          sub-title="对不起，您没有权限访问此内容"
        />
      </div>
    </slot>
  </template>
</template>

<style lang="less" scoped>
.unauthorized {
  padding: 24px;
  display: flex;
  justify-content: center;
}
</style> 